<template>
  <view class="course-detail-container">
    <view class="header-section">
      <text class="page-title">课程详情</text>
    </view>
    
    <view class="course-detail-card">
      <image class="course-image" :src="courseDetail.image || '/static/logo.png'" mode="aspectFill"></image>
      
      <view class="course-info">
        <text class="course-name">{{ courseDetail.name }}</text>
        <text class="course-coach">教练：{{ courseDetail.coach }}</text>
        <text class="course-description">{{ courseDetail.description }}</text>
        
        <view class="course-meta">
          <view class="meta-item">
            <text class="meta-label">时间：</text>
            <text class="meta-value">{{ courseDetail.time }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">地点：</text>
            <text class="meta-value">{{ courseDetail.location }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">容量：</text>
            <text class="meta-value">{{ courseDetail.booked }}/{{ courseDetail.capacity }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">时长：</text>
            <text class="meta-value">{{ courseDetail.duration }}分钟</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="action-section">
      <button 
        class="book-button" 
        :disabled="isBooked || courseDetail.booked >= courseDetail.capacity"
        @click="bookCourse"
      >
        {{ isBooked ? '已预约' : courseDetail.booked >= courseDetail.capacity ? '已满员' : '立即预约' }}
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { courseApi, bookingApi } from '../../src/services/api'

// 课程详情数据
const courseDetail = ref({
  id: 1,
  name: '瑜伽课程',
  coach: '张教练',
  description: '瑜伽是一种古老的练习，通过体式、呼吸和冥想来提升身心健康。本课程适合所有水平的练习者，帮助您增强柔韧性、力量和平衡感。',
  time: '每天 09:00-10:00',
  location: '瑜伽室A',
  duration: 60,
  booked: 8,
  capacity: 15,
  image: '/static/logo.png'
})

// 是否已预约
const isBooked = ref(false)

// 页面加载时获取课程详情
onMounted(() => {
  // 从路由参数获取课程ID
  const pages = getCurrentPages()
  if (pages.length > 0) {
    const current = pages[pages.length - 1]
    // @ts-ignore
    const options = current.options || {}
    const courseId = options.id ? parseInt(options.id) : 1
    fetchCourseDetail(courseId)
  }
})

// 获取课程详情
const fetchCourseDetail = async (id: number) => {
  try {
    const response: any = await courseApi.getCourseDetail(id)
    courseDetail.value = response.data
  } catch (error) {
    console.error('获取课程详情失败:', error)
    uni.showToast({
      title: '获取课程详情失败',
      icon: 'none'
    })
  }
}

// 预约课程
const bookCourse = async () => {
  if (isBooked.value || courseDetail.value.booked >= courseDetail.value.capacity) return
  
  try {
    uni.showLoading({
      title: '预约中...'
    })
    
    // 调用预约课程的API
    const response: any = await bookingApi.bookCourse({
      courseId: courseDetail.value.id
    })
    
    uni.hideLoading()
    uni.showToast({
      title: '预约成功',
      icon: 'success'
    })
    
    // 更新状态
    isBooked.value = true
    courseDetail.value.booked += 1
  } catch (error: any) {
    uni.hideLoading()
    uni.showToast({
      title: error.message || '预约失败',
      icon: 'none'
    })
  }
}
</script>

<style lang="scss" scoped>
.course-detail-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.course-detail-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.course-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
}

.course-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.course-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.course-coach {
  font-size: 28rpx;
  color: #666;
}

.course-description {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.course-meta {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.meta-item {
  display: flex;
}

.meta-label {
  font-size: 28rpx;
  color: #666;
  width: 120rpx;
}

.meta-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.action-section {
  padding: 30rpx;
  text-align: center;
}

.book-button {
  background-color: #4B0082;
  color: #fff;
  border: none;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: bold;
  
  &:active {
    opacity: 0.8;
  }
  
  &:disabled {
    background-color: #ccc;
  }
}
</style>